<template>
  <div id="app-container" style="padding:30px">
<!--  查询  -->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="指令名称">
        <el-input v-model="dispOrdQuery.instructionName" placeholder="指令名称"></el-input>
      </el-form-item>
      <el-form-item label="创建时间">
        <el-date-picker
          v-model="dispOrdQuery.beginDate"
          type="datetime"
          placeholder="选择开始时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00"
        />
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="dispOrdQuery.endDate"
          type="datetime"
          placeholder="选择截止时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="query()">查询</el-button>
        <el-button type="primary" @click="reset()">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 列表 -->
    <el-table :data="dispOrdList" border fit highlight-current-row @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column label="序号" width="70" align="center">
        <template slot-scope="scope">
          {{ (pageNo - 1) * pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="instructionName" label="指令名称" width="200" />
      <el-table-column label="优先级">
        <template slot-scope="scope">
          {{
          scope.row.instructionPriority === 1 ? '一级' :
          scope.row.instructionPriority === 2 ? '二级' :
          scope.row.instructionPriority === 3 ? '三级' : '四级'
          }}
        </template>
      </el-table-column>
      <el-table-column label="专业类型">
        <template slot-scope="scope">
          {{
          scope.row.instructionType === 1 ? '生产调度指令' :
          scope.row.instructionType === 2 ? '安全调度指令' :
          scope.row.instructionType === 3 ? '开工调度指令' : '培训调度指令'
          }}
        </template>
      </el-table-column>
      <el-table-column prop="instructionDescribe" label="指令描述" />
    </el-table>
    <!-- 分页 -->
    <el-pagination
      :page-size="pageSize"
      :current-page="pageNo"
      :total="total"
      :pager-count="11"
      style="padding: 30px 0; text-align: center;"
      layout="total, prev, pager, next, jumper"
      @current-change="query">
    </el-pagination>
    <!-- 操作按钮 -->
    <el-row>
      <el-col :span="2" :offset="8">
        <el-button type="primary" @click="toCreateDispOrd()">创建</el-button>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" @click="toUpdateDispOrd()" :disabled="this.multipleSelection.length === 0 || this.multipleSelection.length > 1">修改</el-button>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" @click="deleteDispOrd()" :disabled="this.multipleSelection.length === 0 || this.multipleSelection.length > 1">删除</el-button>
      </el-col>
    </el-row>
  <!--  新增界面对话框  -->
    <el-dialog
      title="新增集团调度指令信息"
      :visible.sync="dialogVisible"
      width="50%">
      <el-form label-width="130px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="优先级">
              <el-select v-model="dispOrd.instructionPriority" clearable placeholder="请选择">
                <el-option :value="1" label="一级"/>
                <el-option :value="2" label="二级"/>
                <el-option :value="3" label="三级"/>
                <el-option :value="4" label="四级"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="专业类型">
              <el-select v-model="dispOrd.instructionType" clearable placeholder="请选择">
                <el-option :value="1" label="生产调度指令"/>
                <el-option :value="2" label="安全调度指令"/>
                <el-option :value="3" label="开工调度指令"/>
                <el-option :value="4" label="培训调度指令"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="指令名称">
              <el-input v-model="dispOrd.instructionName"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="指令描述">
              <el-input v-model="dispOrd.instructionDescribe" :rows="10" type="textarea"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="3" :offset="5">
            <el-form-item>
              <el-button :disabled="saveBtnDisabled" type="primary" @click="saveDispOrd()">保存</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item>
              <el-button type="primary" @click="createDialogVisible = false">返回</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import dispord from '@/api/pms/dispord'

export default {
  data() { // ## 定义变量,初始化方法
    return {
      dispOrdList: null, // ## 数据列表
      dispOrdQuery: {}, // ## 查询条件封装对象
      total: 0, // ## 总记录数
      pageNo: 1, // ## 页码
      pageSize: 10, // ## 每页显示记录数
      multipleSelection: [], // ## 记录表格复选框选中的值
      dialogVisible: false, // ## 表示不打开窗口
      dispOrd: {}, // ##  调度指令库封装类
      saveBtnDisabled: false // ## 不禁用按钮
    }
  },
  created() {
    this.query()
  },
  methods: {
    query(pageNo = 1) {
      this.pageNo = pageNo
      // ## 查询数据列表
      dispord.findPage(this.pageNo, this.pageSize, this.dispOrdQuery)
        .then(response => {
          this.dispOrdList = response.data.items
          this.total = response.data.total
        })
    },
    handleSelectionChange(val) { // ## 复选框改变时触发该事件
      this.multipleSelection = val
    },
    reset() { // ## 重置查询条件
      this.dispOrdQuery = {}
      this.query()
    },
    toCreateDispOrd() { // ## 展示新增界面
      // ## 清空
      this.dispOrd = {}
      this.dialogVisible = true
    },
    saveDispOrd() { // ## 保存
      this.saveBtnDisabled = true
      dispord.add(this.dispOrd)
        .then(response => {
          // ##关闭窗口
          this.dialogVisible = false
          // ## 消息提示
          this.$message({
            type: 'success',
            message: '保存成功!'
          })
          // ## 重新查询
          this.query()
        })
    },
    toUpdateDispOrd() { // ## 跳转至修改界面
      // ## 获取所有选中行的id组成的字符串，以逗号分隔
      var ids = this.multipleSelection.map(item => item.id).join()
      // ## 跳转
      this.$router.push('/dispord/update/' + ids)
    },
    deleteDispOrd() {
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var ids = this.multipleSelection.map(item => item.id).join()
        dispord.delete(ids)
          .then(response => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.query()
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style scoped>

</style>
